<template>
  <div>
    <div class="title">管理员表</div>
    <div style="background-color: #fff;width: 100%;">
      <div style="padding: 10px 10px 10px 10px; display: flex;">
        <el-input placeholder="请输入管理员手机号" @click-suffix="search" suffix-icon="el-icon-search" style="width: 300px;">
        </el-input>
      </div>

      <!-- 表格 -->
      <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">

          <el-table-column prop="empName" label="管理员" width="220">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="220">
          </el-table-column>
          <el-table-column prop="stuId" label="学号" width="220">
          </el-table-column>
          <el-table-column label="订单状态" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 1" style="color:rgb(127, 255, 187);">交易完成</div>
              <div v-else-if="scope.row.status === 0" style="color:rgb(127, 157, 255);">待发货</div>
              <div v-else-if="scope.row.status === 2" style="color:rgb(127, 157, 255);">订单已删除</div>
              <div v-else-if="scope.row.status === 3" style="color:rgb(255, 47, 36);">已退款</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <span class="handle" style="color: #da2020;">查看</span>
            <span class="handle" style="color: #da2020;">编辑</span>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, empName: '张三', phone: '13671233210', stuId: '202201102032', job: 1 },
        { id: 2, empName: '张三', phone: '13671233210', stuId: '202201102032', job: 2 },
        { id: 3, empName: '张三', phone: '13671233210', stuId: '202201102032', job: 0 },
        { id: 4, empName: '张三', phone: '13671233210', stuId: '202201102032', job: 1 },
        { id: 5, empName: '张三', phone: '13671233210', stuId: '202201102032', job: 1 },
      ]
    }
  }
}
</script>

<style scoped>
.title {
    font-size: larger;
    margin: 10px 10px 30px 0;
    /* font-family: Microsoft YaHei; */
}
.handle {
    /* margin: 0 10px; */
    color: #409EFF;
    /* 鼠标移上去有手形 */
    cursor: pointer
}
</style>